import '../static/reset-element.scss';
import './common.scss';
import { ref } from 'vue';
import { ElButton } from 'element-plus';
import ZwUnityKitTreeTableSelect from '../../../src/components/ZwUnityKitTreeTableSelect/Index.vue';
import { getGroupList, getFriendsList } from '../static/api.js';

window.domainApi = '//api-dev.scrm.keyid.cn';

export default {
    title: 'Scrm System/ZwUnityKitTreeTableSelect Library/ZwUnityKitTreeTableSelect',
    component: ZwUnityKitTreeTableSelect,
    tags: ['autodocs'],
    argTypes: {
        modelValue: {
            control: { type: 'boolean' },
            type: { name: 'boolean', required: false },
            description: '是否显示组件， 默认为false'
        },
        title: {
            control: { type: 'text' },
            type: { name: 'string', required: false },
            description: '标题字段，默认为选择朋友圈素材'
        },
        treeFetchApi: {
            control: { type: 'object' },
            type: { name: 'object', required: false },
            description: '左侧tree数据请求接口，支持类型为Function、Array、Promise'
        },
        tableFetchApi: {
            control: { type: 'object' },
            type: { name: 'object', required: false },
            description: '右侧table数据请求接口，支持类型为Function、Array、Promise'
        },
        searchOptions: {
            control: { type: 'array' },
            type: { name: 'array', required: false },
            description: 'search配置参数，类似scrm配置'
        },
        tableOptions: {
            control: { type: 'array' },
            type: { name: 'array', required: false },
            description: 'table配置参数，类似scrm配置'
        },
        rowKey: {
            control: { type: 'text' },
            type: { name: 'string', required: false },
            description: 'table行唯一标识符，默认为id'
        },
        radioData: {
            control: { type: 'object' },
            type: { name: 'object', required: false },
            description: '用于回显选中的数据，单选时为object，多选时为array'
        }
    }
};

const Template = args => ({
    components: { ZwUnityKitTreeTableSelect, ElButton },
    setup() {
        const treeFetchApi = ref([]);
        const open = () => {
            const treeParams = { type: 8 };
            treeFetchApi.value = [treeParams, getGroupList];
            args.modelValue = true;
        };
        const submit = data => {
            args.radioData = data;
        };
        return { args, treeFetchApi, getFriendsList, open, submit };
    },
    template: `
        <ElButton @click="open">选择朋友圈素材</ElButton>
        <ZwUnityKitTreeTableSelect v-bind="args" v-model="args.modelValue" :searchOptions="args.searchOptions" :tableOptions="args.tableOptions" :treeFetchApi="treeFetchApi" :tableFetchApi="getFriendsList" @submit="submit"/>
    `
});

/**
 *  默认演示
 */
export const Default = Template.bind({});

/**
 *  数据回显
 */
export const DefaultSelected = Template.bind({});
DefaultSelected.args = {
    searchOptions: [
        {
            type: 'input',
            label: '',
            key: 'content',
            value: '',
            placeholder: '搜索素材'
        }
    ],
    tableOptions: [
        {
            prop: 'title',
            label: '标题',
            width: 200
        },
        {
            prop: 'content_text',
            label: '内容',
            width: 220
        },
        {
            prop: 'content_text',
            label: '图片/视频/链接',
            width: 200,
            render({ row }) {
                const renderImage = (
                    <div className={'content'}>
                        {row.mediaFileInfo.length ? (
                            <img className={'img'} src={row.mediaFileInfo[0].absolute_url}></img>
                        ) : (
                            '--'
                        )}
                    </div>
                );
                switch (row.type) {
                    case 1:
                        return renderImage;
                    default:
                        return '--';
                }
            }
        },
        {
            prop: 'created_at',
            label: '添加时间',
            width: 200
        }
    ],
    radioData: { id: 163 }
};
